<template>
    <div>
   <div class="top">
            <van-nav-bar
           title="题库选择"
           left-arrow
           @click-left="$router.go(-1)"
          />
        </div>
        <!-- 搜索 -->
        <van-search
  v-model="value"
  shape="round"
  background="#fff"
  placeholder="请输入搜索关键词"
  @keydown.enter="ss"
>
<template #action>
    <div @click="ss">搜索</div>
  </template>
</van-search>
<!-- 侧边栏 -->
<van-row v-show="value==''" class="ce">
  <van-col span="6">
    <van-sidebar v-model="activeKey" >
  <van-sidebar-item v-for="item in list" :key="item.id" :title="item.name" @click="shuju(item.id)" />
</van-sidebar>
</van-col>
  <van-col span="18" style="background:#fff;">
   <div class="box" v-for="item in arr" :key="item.id">
    <p>{{item.name}}</p>
    <ul>
      <li v-for="ite in item.bank" :key="ite.id">
        {{ite.name}}
      </li>
    </ul>
   </div>
  </van-col>
</van-row>
<ol>
  <li v-for="item in arrList" :key="item.id">
    {{item.name}}
  </li>
</ol>
    </div>
</template>

<script>
import { change, changeId, changess } from "../../Request/http.js";
export default {
  name: "EverydayPoint",

  data() {
    return {
      value: "",
      activeKey: 0,
      list: [],
      arr: [],
      show: false,
      arrList: []
    };
  },

  mounted() {
    change().then(res => {
      console.log(res);
      this.list = res;
    });
    changeId(57).then(res => {
      console.log(res);
      this.arr = res;
    });
  },

  methods: {
    shuju(id) {
      changeId(id).then(res => {
        console.log(res);
        this.arr = res;
      });
    },
    ss() {
      changess(this.value).then(res => {
        console.log(res);
        this.arrList = res;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.top{
  max-height:100vh; 
}
.ce{
  max-height:87.5vh; 

  overflow-y: scroll;
}
.van-row {
  background: #fff;
}
.van-sidebar {
  overflow: auto;
}
.box {
  p {
    margin: 0.2rem;
  }
  ul {
    padding: 0.2rem;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    li {
      width: 40%;
      background: rgb(238, 238, 238);
      margin-bottom: 1rem;
      text-align: center;
      padding: 0.1rem;
    }
  }
}
ol {
  li {
    background: #fff;
    padding: 0.5rem;
    border: 1px solid #ccc;
  }
}
</style>